<template>
  <div style="display: flex; margin-bottom: 10px">
    <el-autocomplete
      v-model="searchAddress"
      :fetch-suggestions="querySearch"
      placeholder="输入地址进行搜索"
      style="flex: 1"
      @keyup.enter="searchLocation"
      @select="handleSelect"
    />
    <el-button style="margin-left: 10px" @click="searchLocation">搜索</el-button>
    <el-button :disabled="!hasFence" style="margin-left: 10px" @click="handleClearFence">清除围栏</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { defineEmits, defineProps, onMounted, ref } from 'vue'

// 定义 T 类型，避免 TypeScript 报错
declare const T: any

const props = defineProps({
  hasFence: {
    type: Boolean,
    default: false,
  },
})

const searchAddress = ref('')
const specify = '650200' // 克拉玛依市行政区划代码
const pageCapacity = 10 // 每页结果数量

const emit = defineEmits(['update-center', 'clear-fence-triggered'])

interface CenterCoordinates {
  lat: number
  lng: number
}

// 更新建议项接口以匹配 T.LocalSearch 返回的 POI 结构
interface SuggestionItem {
  value: string // 用于 el-autocomplete 显示;
  name: string
  address: string
  lonlat: string // "经度,纬度";
  lat?: number // 解析后的纬度;
  lon?: number // 解析后的经度
  // 可以根据需要添加 T.Poi 返回的其他字段
}

let localsearch: any = null // T.LocalSearch 实例
let autocompleteCallback: ((suggestions: SuggestionItem[]) => void) | null = null // 存储 el-autocomplete 的回调
let isDirectSearch = false // 标记是否为直接点击"搜索"按钮触发

// 初始化 T.LocalSearch
onMounted(() => {
  // 确保 T 对象可用
  if (T !== undefined && T.Map && T.LocalSearch) {
    // 创建一个临时的、不可见的地图实例给 LocalSearch 使用
    const dummyMapElement = document.createElement('div')
    dummyMapElement.style.display = 'none' // 隐藏元素
    document.body.appendChild(dummyMapElement) // 需要添加到 DOM 中才能初始化地图
    const dummyMap = new T.Map(dummyMapElement)
    // 大致定位到克拉玛依市中心
    dummyMap.centerAndZoom(new T.LngLat(84.87, 45.58), 10)

    const config = {
      pageCapacity,
      onSearchComplete: handleSearchResults, // 设置回调函数
      specify,
    }
    localsearch = new T.LocalSearch(dummyMap, config)

    // 组件卸载时清理
    // Note: This requires onUnmounted to be imported if used directly in setup
    // Consider adding a cleanup function if needed, especially for the dummyMapElement
    // onUnmounted(() => { document.body.removeChild(dummyMapElement); });
  } else {
    console.error('T 对象未加载或 T.LocalSearch 不可用。')
    ElMessage.error('地图搜索服务初始化失败，请刷新页面重试。')
  }
})

// T.LocalSearch 的搜索结果回调函数
function handleSearchResults(result: any) {
  // 检查结果类型，我们主要关心 POI 结果
  if (result && result.getResultType() === 1) {
    const pois = result.getPois() as Array<{
      name: string
      address: string
      lonlat: string
      // ... 其他 T.Poi 属性
    }>

    if (pois && pois.length > 0) {
      const suggestions: SuggestionItem[] = pois.map((poi) => {
        const [lonStr, latStr] = poi.lonlat.split(',')
        return {
          ...poi, // 包含 name, address, lonlat 等
          value: poi.name, // el-autocomplete 显示的值
          lat: parseFloat(latStr),
          lon: parseFloat(lonStr),
        }
      })

      if (isDirectSearch) {
        // 如果是直接搜索，取第一个结果定位
        const firstResult = suggestions[0]
        if (firstResult.lat && firstResult.lon) {
          const center: CenterCoordinates = {
            lat: firstResult.lat,
            lng: firstResult.lon,
          }
          emit('update-center', center)
          // searchAddress.value = '' // Removed:不再清空输入框
          ElMessage.success('搜索成功')
        } else {
          ElMessage.warning('第一个搜索结果缺少坐标信息')
        }
        isDirectSearch = false // 重置标记
      } else if (autocompleteCallback) {
        // 如果是自动完成，调用回调传递建议
        autocompleteCallback(suggestions)
        autocompleteCallback = null // 清除回调
      }
    } else {
      // 没有找到 POI 结果
      if (isDirectSearch) {
        ElMessage.warning('未找到相关地点')
        isDirectSearch = false
      } else if (autocompleteCallback) {
        autocompleteCallback([])
        autocompleteCallback = null
      }
    }
  } else {
    // 处理其他结果类型或错误
    console.log('LocalSearch 返回了非 POI 类型的结果或无结果:', result)
    if (isDirectSearch) {
      ElMessage.warning('搜索服务未返回地点信息')
      isDirectSearch = false
    } else if (autocompleteCallback) {
      autocompleteCallback([])
      autocompleteCallback = null
    }
  }
}

// el-autocomplete 的 fetch-suggestions 方法
function querySearch(queryString: string, cb: (suggestions: SuggestionItem[]) => void): void {
  if (localsearch && queryString) {
    autocompleteCallback = cb // 存储回调函数
    isDirectSearch = false // 标记为自动完成搜索
    localsearch.search(queryString)
  } else {
    cb([]) // 如果 localsearch 未初始化或查询为空，返回空数组
  }
}

// el-autocomplete 选择建议项时的处理方法
function handleSelect(item: Record<string, any>) {
  const suggestion = item as SuggestionItem // 使用我们定义的接口
  // 现在 suggestion 直接包含解析好的 lat 和 lon
  if (suggestion && suggestion.lat && suggestion.lon) {
    const center: CenterCoordinates = {
      lat: suggestion.lat,
      lng: suggestion.lon,
    }
    emit('update-center', center)
    // searchAddress.value = '' // Removed: 不再清空输入框
    ElMessage.success('定位成功')
  } else {
    console.error('选择的建议项缺少坐标信息:', item)
    ElMessage.error('选择的数据无效')
  }
}

// 点击"搜索"按钮的处理方法
function searchLocation() {
  if (localsearch && searchAddress.value) {
    isDirectSearch = true // 标记为直接搜索
    autocompleteCallback = null // 清除可能存在的旧回调
    localsearch.search(searchAddress.value)
  } else if (searchAddress.value === '') {
    ElMessage.warning('请输入搜索关键词')
  } else {
    ElMessage.error('搜索服务不可用，请稍后重试')
  }
}

// 新增：处理点击清除围栏按钮的事件
function handleClearFence() {
  emit('clear-fence-triggered')
}
</script>

<style scoped>
/* 根据需要添加样式 */
</style>
